<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>任务列表</title>
  
  <#import "/public/common_easyui.ftl" as common>
  <@common.plan_css/>
  <@common.plan_js/>
  <style type="text/css">
    #tb{
      padding: 15px;
    }
    .tb-inside{
      margin-top: 7px;
    }
    .priority-margin {
      height: 20px;
    }
  </style>
  <script type="text/javascript">
      var gzzbdrGrid = null;
      function formatDate(value,row,index){
        if(!value || value=='')
          return '';
        var newTime = new Date(value);
        return newTime.Format('yyyy-MM-dd')
      }
      function formatChangeDate(value,row,index) {
        var d = formatDate(value,row,index);
        return '<input type="text" class="easyui-datebox c-search" name="createTime" value="'+d+'">';
      }
      function formatPriority(value,row,index) {
        return '<div class="priority-margin">' + getPrioritySpan(value) + '</div>';
      }
      function formatProgress(value,row,index) {
        return genProgressDiv(value);
      }
      function formatOp(value,row,index) {
        var html = genSelectProgress('progress','p-change',false,row.id,row.progress);
        html += '<br/>' + genSelectPriority('priority','p-change',false,row.id,row.priority);
        html += '<br/><a href="${base}/work/plan/add?id='+row.id+'" class="p-edi">编辑</a>';
        return html;
      }

        $(function(){
            $.extend($.fn.datagrid.defaults.editors, {
              datebox : {
                init : function(container, options) {
                  var input = $('<input type="text">').appendTo(container);
                  input.datebox(options);
                  return input;
                },
                destroy : function(target) {
                  $(target).datebox('destroy');
                },
                getValue : function(target) {
                  return $(target).datebox('getValue');//获得旧值
                },
                setValue : function(target, value) {
                  console.info(formatDate(value));
                  $(target).datebox('setValue', formatDate(value));//设置新值的日期格式
                },
                resize : function(target, width) {
                  $(target).datebox('resize', width);
                }
              }
            });
          $.extend($.fn.datagrid.methods, {
            editCell: function(jq,param){
              return jq.each(function(){
                var opts = $(this).datagrid('options');
                var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
                for(var i=0; i<fields.length; i++){
                  var col = $(this).datagrid('getColumnOption', fields[i]);
                  col.editor1 = col.editor;
                  if (fields[i] != param.field){
                    col.editor = null;
                  }
                }
                $(this).datagrid('beginEdit', param.index);
                for(var i=0; i<fields.length; i++){
                  var col = $(this).datagrid('getColumnOption', fields[i]);
                  col.editor = col.editor1;
                }
              });
            }
          });
          
          var editIndex = undefined;
          function endEditing(){
            if (editIndex == undefined){return true}
            if ($('#tt').datagrid('validateRow', editIndex)){
              $('#tt').datagrid('endEdit', editIndex);
              editIndex = undefined;
              return true;
            } else {
              return false;
            }
          }
          function onClickCell(index, field){
            if(field=='op')
              return;
            if (endEditing()){
              $('#tt').datagrid('selectRow', index)
                  .datagrid('editCell', {index:index,field:field});
              editIndex = index;
            }
          }
          function onAfterEdit(rowIndex,rowData,changes) {
            var count = 0;
            jQuery.each(changes,function(){count++;})
            if(count==0)
              return;
            changes.id = rowData.id;
            $.ajax({
              url:'${base}/work/plan/save.json',
              type:'post',
              data:changes,
              dataType:'json',
              success : function(data) {
                if(data.code==0) {
                } else if(data.code==-1) {
                  alert(data.message);
                } else if(data.code==-2) {
                  alert('请登陆');
                } else {
                  alert('操作失败');
                }
              },
              error : function() {
                alert('操作失败');
              }
            })
          }
          gzzbdrGrid = $('#tt').datagrid({
            url: "${base}/work/plan/search.json",
            height: 'auto',
            nowrap : false,
            pageList: [10,20,30],
            pageSize: 10,
            loadMsg: '数据装载中',
            fitColumns: true,
            loadFilter : function(data){
              if(data.code==-1) {
                alert(data.message);
              } else if(data.code==-2) {
                alert('请登陆');
              } else if(data.code==0) {
                return data.data;
              } else {
                alert('操作失败');
              }
            },
            onClickCell : onClickCell,
            onAfterEdit : onAfterEdit,
            idField:'id',
            frozenColumns: [[
                {field: 'ck', checkbox:true}
              ]],
            columns:[[
              {field:'id',hidden:true},
              {field:'createTime',title:'创建时间',sortable:true,align:'center',formatter:formatDate,width:'80px'},
              {field:'bname',title:'大项目',sortable:true,align:'center',width:'100px'},
              {field:'sname',title:'小项目',sortable:true,align:'center',width:'100px'},
              {field:'title',title:'标题',width:'200px'},
              {field:'content',title:'内容',width:'400px'},
              {field:'startTime',title:'开始时间',sortable:true,align:'center',editor:'datebox',formatter:formatDate,width:'100px'},
              {field:'endTime',title:'结束时间',sortable:true,align:'center',editor:'datebox',formatter:formatDate,width:'100px'},
              {field:'progress',title:'进度',sortable:true,align:'center',formatter:formatProgress,width:'80px'},
              {field:'priority',title:'优先级',sortable:true,align:'center',formatter:formatPriority,width:'80px'},
              {field:'op',title:'操作',align:'center',formatter:formatOp}
            ]],
              rownumbers: true,
              singleSelect: true,
              pagination: true,
              toolbar:'#tb'
          })
          //初始化加载分类
          $('#b-search').click(function(){
            search();
          })
          $('#b-reset').click(function(){
            $('.c-search').val('');
          })
          /** 进度、优先级 更改 **/
          $('body').delegate('.p-change','change',function(){
            var data = {};
            data.id = $(this).attr('pid');
            var name = $(this).attr('name');
            data[name] = $(this).val();
            $.ajax({
              url:'${base}/work/plan/save.json',
              type:'post',
              data:data,
              dataType:'json',
              success : function(r) {
                if(r.code==-1) {
                  alert(r.message);
                } else if(r.code==-2) {
                  alert('请登陆');
                } else if(r.code==0) {
                } else {
                  alert('操作失败');
                }
              },
              error : function() {
                alert('操作失败');
              }
            })
          })
          
          $('#tree').tree({
            data : ${bp_json},
            checkbox : true,
            lines : true,
            formatter : function(node) {
              return node.name;
            },
            onBeforeCheck : function(node,checked) {
              if(selectmode==1) {
                // 单选模式
                var nodes = $('#tree').tree('getChecked');
                $.each(nodes,function(i,node) {
                  $('#tree').tree('uncheck', node);
                })
              }
            },
            onCheck:function(node, checked){
              var nodes = $('#tree').tree('getChecked');
              var sid = '';
              $.each(nodes,function(i,node) {
                if(node.type==2) {
                  if(sid!='')
                    sid += ',';
                  sid += node.id;
                }
              });
              $('#sid').val(sid);
              search();
            }
          })
          var selectmode = 1;
          $('.selectmode').click(function(){
            selectmode = $(this).val();
          })

          });
        //搜索
        function search(){
          var queryParams = gzzbdrGrid.datagrid('options').queryParams;
          $('.c-search').each(function(){
            var name = $(this).attr('name');
            queryParams[name] = $(this).val();
          });
          $('input','#tb').each(function(){
            var name = $(this).attr('name');
            queryParams[name] = $(this).val();
          })
          gzzbdrGrid.datagrid({url: "${base}/work/plan/search.json"});
        }


  </script>
  </head>
  <body class="easyui-layout">
    <div data-options="region:'west',split:true" title="项目" style="width:200px;padding: 20px 20px;">
      <div style="border: 1px dotted gray;padding: 2px;margin: 2px;">
        <input class="selectmode" name="selectmode" type="radio" value="1" checked="checked"><span>单选</span>
        <input class="selectmode" name="selectmode" type="radio" value="2"><span>多选</span>
      </div>
      <ul class="easyui-tree" checkbox="true" id="tree">
      </ul>
    </div>
    <div data-options="region:'center',title:'任务列表',iconCls:'icon-ok'">
      <div id="tb"> 
        <div>
            <label>开始时间</label>
            <input name="startTimeBegin" type="text" class="easyui-datebox c-search" value="${startTimeBegin!}">
            -
            <input name="startTimeEnd" type="text" class="easyui-datebox c-search" value="${startTimeEnd!}">
            <label>结束时间</label>
            <input type="text" class="easyui-datebox c-search" name="endTimeBegin" value="${endTimeBegin!}">
            -
            <input type="text" class="easyui-datebox c-search" name="endTimeEnd" value="${endTimeEnd!}">
            <label>创建时间</label>
            <input type="text" class="easyui-datebox c-search" name="createTimeBegin" value="${createTimeBegin!}">
            -
            <input type="text" class="easyui-datebox c-search" name="createTimeEnd" value="${createTimeEnd!}">
        </div>
        <div class="tb-inside">
          <input name="sid" type="hidden" value="${sid!}" id="sid"/>
          <label>进度</label>
          <@common.plan_select_progress progress="${progress!}" name="progress" clazz="c-search" all=true/>
          <label>优先级</label>
          <@common.plan_select_priority priority="${priority!}" name="priority" clazz="c-search" all=true/>

          <label>显示已完成</label>
          <select class="c-search" name="showComplete">
            <option value="">不显示</option>
            <option value="showComplete" <#if showComplete??><#if showComplete?length gt 0>selected</#if></#if>>显示</option>
          </select>

          <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" style="width:80px" id="b-reset">重置</a>
          <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px" id="b-search">查询</a>
        </div>
      </div>
      <div id="tt"></div>
    </div>
  </body>
</html>